<!DOCTYPE html>
<html lang="en">
<head>

	<meta charset="UTF-8">
	<title>风车-CSS实例之position定位</title>
	<style>
		*{ 
			margin:100;
			padding:100;

		 }
		 #dfc{
		 	left:100%;
			top:100%;
		 }
		 div.y1{ 
			width: 180px;
			height: 180px;
			line-height: 180px;
			text-align: center;
			margin: 100px;
			background-color: red;
			border-radius: 180px 0;
			-webkit-transform: rotate(90deg);
			-ms-transform: rotate(90deg);
			-o-transform: rotate(90deg);
			transform: rotate(90deg);
			position:absolute;
			left:-15px;
			top:0px;

		}

		div.y2{ 
			width: 180px;
			height: 180px;
			line-height: 180px;
			text-align: center;
			margin: 100px;
			background-color: #ffff00;
			border-radius: 180px 0;
			-webkit-transform: rotate(90deg);
			-ms-transform: rotate(90deg);
			-o-transform: rotate(90deg);
			transform: rotate(90deg);
			position:absolute;
			left:165px;
			top:175px;

		}
			div.y3{ 
			width: 180px;
			height: 180px;
			line-height: 180px;
			
			text-align: center;
			margin: 100px;
			background-color: #00cc00;
			border-radius: 180px 0;
			-webkit-transform: rotate(90deg);
			-ms-transform: rotate(90deg);
			-o-transform: rotate(90deg);
			transform: rotate(180deg);

			position:absolute;
			left:165px;
			top:0px;

		}
		div.y4{ 
			width: 180px;
			height: 180px;
			line-height: 180px;
			
			text-align: center;
			margin: 100px;
			background-color: #0000ff;
			border-radius: 180px 0;
			-webkit-transform: rotate(90deg);
			-ms-transform: rotate(90deg);
			-o-transform: rotate(90deg);
			transform: rotate(180deg);

			position:absolute;
			left:-15px;
			top:175px;

		}
		div.main{ 
			width:520px;
			height:520px;
			/*border:0px solid blue;*/
			margin: 20px;
			/* position:relative; */
			 position:absolute;
			 left:325px;
			top:20px;   
			border-radius: 50%;
			animation-name:fengche;

		}

		#d5.hover{
								
			 transform: rotate(3600deg);

			}

		div.d5{ 
			width:60px;
			height:600px;
			border:1px solid #6600ff;
			margin: 20px;
			/* position:relative; */
			 position:absolute;
			 left:560px;
			top:300px;   
			border-radius: 50%;
			background-color: #ff00ff;
			
			
		}
		
		
			div.fc{ 
			margin-top: 200px;
			 position:absolute;
			 left:260px;
			top:5px;   
			width: 100%;
			height: 100%;
			left:0%;
			top:-20%;
			}
			
			

		html, body, div, :before, :after {
  box-sizing: border-box;
  margin: 0;
}
		html, body {
  height: 100%;
}
		#tj {
		  position: relative;
		  top: 465px;
		  left: 757px;
		  width: 60px;
		  height: 60px;
		  margin: -180px 0 0 -180px;
		  background-image: linear-gradient(0deg, black 50%, white 50%);
		  border-radius: 50%;
		  box-shadow: 5px 5px 8px #666666;
  		
}
		#tj,#main {
				transition: all 60s ease-in-out;
		}
		#tj:hover,#main:hover {
  			transform: rotate(360000deg);
}
		#tj:before, #tj:after,#main:before,#main:after {
		  content: "";
		  display: block;
		  position: absolute;
		  width: 50%;
		  height: 50%;
		  top: 25%;
		  border-radius: 50%;
		  border-width: 7px;
		  border-style: solid;
}
		#tj:before {
		  left: 0;
		  border-color: black;
		  background-color: white;
}
		#tj:after {
		  right: 0;
		  border-color: white;
		  background-color: black;
}


</style>

</head>
	<body>
		<div class="dfc">

			<div class="fc" >
				<div class="d5"></div>
					<div class="main">

						<div class="y1"></div>
						<div class="y2"></div>
						<div class="y3"></div>
						<div class="y4"></div>

						</div><div id="tj"></div>
				</div>

			
			
		</div>
		<div style="height:0px; width:0px; border:0px solid blck;">
		<script src="./js/index.js">
		</script>
	</div>
	</body>
</html>
